<template>
  <div style="padding: 20px">
    <el-row :gutter="20">

      <el-col :span="6" :xs="24">
        <el-card>
          <el-divider content-position="left"><span style="font-size: 17px;font-weight: bolder">选择管辖区县进行查询</span><span style="margin-left: 10px"><a style="color: #20a0ff;font-weight: bolder" @click="clearParam">清空参数</a></span></el-divider>
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行查询"
          />
          <div class="down-tree">
            <el-tree
              ref="tree"
              class="filter-tree"
              :data="Dictdata"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <!--    查询条件部分-->
          <el-divider content-position="left"><span style="font-weight: bolder;font-size: 18px">查询条件</span></el-divider>
          <div>
            <el-form ref="showForm" label-position="right" label-width="100px">
              <el-row :gutter="24">
                <el-col :span="9">
                  <el-form-item label="小区信息：">
                    <el-input v-model="queryParma.xqxx" clearable size="small" placeholder="请输入查询的小区信息" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否有效小区：" label-width="150px">
                    <el-select
                      v-model="queryParma.sfyxbs"
                      style="position: relative;left: 5px"
                      filterable
                      default-first-option
                      placeholder="请选择请假类型"
                    >
                      <el-option
                        key="0"
                        label=""
                        value=""
                      />
                      <el-option
                        key="1"
                        label="是"
                        value="1"
                      />
                      <el-option
                        key="2"
                        label="否"
                        value="0"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7" align="right">
                  <el-button type="primary" :loading="searchloding" @click="getVillageInfoListPageHandle">查询</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!--    查询查询部分-->
          <div>
            <el-divider content-position="left"><span style="font-weight: bolder;font-size: 18px">小区信息展示</span></el-divider>
            <!--      数据操作按钮-->
            <div style="padding: 10px" align="right">
              <el-button-group>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteBatch">批量删除</el-button>
              </el-button-group>
            </div>

            <el-table
              v-loading="loading"
              :data="dataSource"
              :border="true"
              align="center"
              empty-text="暂无数据"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              />
              <el-table-column
                type="index"
                :index="indexMethod"
                label="#"
                width="50"
                align="center"
              />
              <el-table-column
                label="小区名称"
                prop="villageName"
              />
              <el-table-column
                label="隶属区县"
                align="center"
                width="200"
                prop="cotyCode"
              >
                <template slot-scope="{row}">
                  {{ getDictsValue(row.cotyCode) }}
                </template>
              </el-table-column>
              <el-table-column
                label="设置小区是否有效"
                align="center"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.valiFlag"
                    active-value="1"
                    inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchHandle(scope.row)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="小区信息注册时间"
                align="center"
                width="200"
                prop="createTime"
              />
              <el-table-column
                label="小区信息更新时间"
                align="center"
                width="200"
                prop="updateTime"
              />
              <el-table-column
                label="操作"
                align="center"
                min-width="200"
              >
                <template slot-scope="scope">
                  <div v-if="selectType === 'addition'">
                    <el-button
                      size="mini"
                      @click="checkElement(scope.$index, scope.row)"
                    >选择</el-button>
                  </div>
                  <div v-else-if="selectType !== 'addition'">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                    <el-button
                      size="mini"
                      type="primary"
                      @click="showBuildingModal(scope.$index, scope.row)"
                    >楼号管理</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div align="center">
              <div style="display: inline-block;width: 60px;height:60px;line-height: 60px;text-align: center;font-size: 15px">
                <span style="text-align: center;line-height: 60px;width: 60px;height:60px;">共{{ dataTotals }}条</span>
              </div>
              <div style="display: inline-block">
                <el-pagination
                  :current-page.sync="queryParma.pageIndex"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="queryParma.pageSize"
                  layout="total, sizes, prev,next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
          <modal
            ref="modals"
            :village-info="modifyData"
            :village-coty-code="queryParma.qxbh"
            :dicts-info="Dictdata"
            :alldicts-info="allCotyData"
            @reflushDataHandle="getVillageInfoListPageHandle"
          />
          <building-modal
            ref="buildingModals"
            :dicts-info-b="Dictdata"
            :alldicts-info-b="allCotyData"
            @reflushDataHandle="getVillageInfoListPageHandle"
          />
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>
<style scoped>
.down-tree{
  height: 650px;
  display: block;
  overflow-y: scroll;
}
</style>
<script>
import { dropBatchVillageInfo, getAllVillageInfoPage, modifyOneVillageInfo } from '@/api/ht/xqzhgl/xqgl/xqxxgl'
import Modal from '@/views/ht/xqzhgl/xqxxgl/components/modal'
import BuildingModal from '@/views/ht/xqzhgl/xqxxgl/components/buildingModal'
const { getTreeDictsByType, getDictsList, getDictsByType, getParentDictsList } = require('@/api/dicts')
const { Message } = require('element-ui')
export default {
  name: 'Index',
  components: {
    Modal,
    BuildingModal
  },
  props: {
    selectType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      text: '正在开发',
      filterText: '',
      Dictdata: [], // 二位字典数组数据源
      allCotyData: [], // 所有的区县数据源
      dataSource: [], // 信息列表
      dataTotals: 0, // 查询总条数
      modifyData: {}, // 待修改对象信息
      loading: false, // 数据加载状态标识
      searchloding: false, // 搜索按钮加载
      toggleSearchStatus: false, // 默认是否展开搜索条件
      queryParma: {
        pageIndex: 1,
        pageSize: 5,
        qxbh: '',
        sfyxbs: '',
        xqxx: ''
      },
      hasselectedIdArray: [], // 已经选中的信息ID数组
      defaultProps: {
        children: 'children',
        label: 'value'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getDictArrayListHandle() // 获取管辖区县信息列表
    this.getVillageInfoListPageHandle() // 获取小区信息列表
    this.getAllDictCotyTypeDataHandle() // 获取所有的管辖区县信息列表
  },
  methods: {
    checkElement(index, row) {
      this.$emit('getSelectedVillageInfoId', row)
    },
    getDictsValue(code) {
      const parentStr = getParentDictsList(this.Dictdata, code)
      const kidStr = getDictsList(this.allCotyData, code)
      const resultStr = parentStr + ' - ' + kidStr
      return resultStr
    },
    getVillageInfoListPageHandle() {
      this.getVillageInfoListPage()
    },
    async getVillageInfoListPage() {
      this.loading = true
      const res = await getAllVillageInfoPage(this.queryParma)
      const data = res.data.main.dataArray
      const resp = res.data.respOutMsgHeader
      const totals = res.data.main.totalsData
      const currentPage = res.data.main.currentPage
      if (resp.respCode === 200) {
        setTimeout(() => {
          this.searchloding = false
          this.loading = false
        }, 500)
        this.dataSource = data
        this.dataTotals = totals
        this.queryParma.pageIndex = currentPage
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        this.loading = false
      }
    },
    clearParam() {
      this.queryParma.qxbh = ''
      this.getVillageInfoListPageHandle()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.value.indexOf(value) !== -1
    },
    getDictArrayListHandle() {
      this.getDictArrayList()
    },
    getAllDictCotyTypeDataHandle() {
      this.getAllDictCotyType()
    },
    async getAllDictCotyType() {
      const res = await getDictsByType('coty_type')
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.allCotyData = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async getDictArrayList() {
      const res = await getTreeDictsByType('coty_type')
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.Dictdata = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    handleNodeClick(clickobj, Node, Tree) {
      // 点击父节点不进行操作
      if (clickobj.children) { return null }
      // 点击子节点进行逻辑操作
      this.queryParma.qxbh = clickobj.code
      this.getVillageInfoListPageHandle()
    },
    indexMethod(index) {
      return index + 1 + (this.queryParma.pageIndex - 1) * this.queryParma.pageSize
    },
    handleAdd() {
      this.$refs.modals.checkModelType('add')
    },
    handleEdit(index, row) {
      // 使用父子传参方式
      this.modifyData = row
      this.$refs.modals.checkModelType('edit')
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields()
      this.queryParma = {
        pageIndex: 1,
        pageSize: 5,
        qxbh: '',
        sfyxbs: '',
        xqxx: ''
      }
    },
    handleDelete(index, row) {
      const rowIdarray = []
      rowIdarray.push(row.id)
      this.dropOneVillageInfo(rowIdarray)
    },
    handleDeleteBatch() {
      this.dropBatchVillageInfo()
    },
    async dropOneVillageInfo(array) {
      const res = await dropBatchVillageInfo(array)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        this.getVillageInfoListPageHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async dropBatchVillageInfo() {
      const res = await dropBatchVillageInfo(this.hasselectedIdArray)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        this.getVillageInfoListPageHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    handleSizeChange(val) {
      this.queryParma.pageSize = val
      this.getVillageInfoListPageHandle()
    },
    handleCurrentChange(val) {
      this.queryParma.pageIndex = val
      this.getVillageInfoListPageHandle()
    },
    handleSelectionChange(selections) {
      const rowIdArray = []
      for (const selection of selections) {
        rowIdArray.push(selection.id)
      }
      this.hasselectedIdArray = rowIdArray
    },
    switchHandle(row) {
      this.$confirm('如果设置无效操作，将会使得该小区关联的绝大部分功能失效或者无法正常使用系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.modifyVillageInfo(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
      this.getVillageInfoListPageHandle()
    },
    async modifyVillageInfo(row) {
      const res = await modifyOneVillageInfo(row)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: '设置成功' || 'success',
          type: 'success',
          duration: 2 * 1000
        })
        this.getVillageInfoListPageHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    showBuildingModal(index, row) {
      this.$refs.buildingModals.showDialog(row)
    }
  }
}
</script>
